<template>
	<view class="root">
		<view class="flex2" style="width: 100%;margin-top: 40rpx;">
			<textarea :maxlength="maxlen" v-model="remark" placeholder-class="placeholder_style" placeholder="请输入内容" class="textarea"></textarea>
			<view class="uni_flex_row_between_center info_background">
				<text class="uni_16px uni_color_999 uni_weight_400">{{len}}/{{maxlen}}</text>
				<text class="uni_16px uni_color_red uni_weight_400" @click="clear">清空内容</text>
			</view>
		</view>
		
		<view class="flex1"></view>
		
		<view class="flex1">
			<text class="save_btn" @click="save">保存</text>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				len:0,
				maxlen:24,
				remark:'',
			}
		},
		onLoad(options) {
			this.remark = options.remark;
			uni.setNavigationBarTitle({
				title:"水印设置"
			})
		},
		watch:{
			remark(){
				this.len = this.remark ? this.remark.length : 0;
			}
		},
		methods: {
			clear(){
				this.remark = '';
			},
			save(){
				uni.$emit('receiveRemark',this.remark);
				uni.navigateBack({
					delta:1
				});
			}
		}
	}
</script>

<style>
	.flex1{
		flex: 1;
	}
	.flex2{
		flex: 2;
	}
	.root{
		width: calc(100vw - 60rpx);
		height: calc(100vh);
		margin-left: 30rpx;
		margin-right: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.textarea{
		min-height: 160rpx;
		width: calc(100% - 40rpx);
		background-color: #F7F8FA;
		padding: 20rpx;
	}
	.info_background{
		background-color: #F7F8FA;
		width: calc(100% - 40rpx);
		padding-bottom: 20rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
	}
	.color999{
		color: #999999;
	}
	.colorblue{
		color: dodgerblue;
	}
	.save_btn{
		width: calc(40vw);
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #E00300;
		border-radius: 25px;
		color: #FFFFFF;
		padding-top: 16rpx;
		padding-bottom: 16rpx;
	}
	.placeholder_style{
		color: #999999;
		font-weight: 400;
		font-size: 32rpx;
	}
</style>
